<template>
    <div class="singer_list">
        <app-header
            :title="title"
            style="background: #fff; color: #333; position: sticky; top: 50px; z-index: 3;"
        />
        <main>
            <van-list>
                <van-cell
                    class="singer_item"
                    v-for="item in list"
                    :key="item"
                    :is-link="true"
                    :to="`/singer/info/${item.singerid}`"
                >
                    <div class="singer_item--content">
                        <img class="singer_image" v-lazy="createImageUrl(item.imgurl)" />
                        <span class="singer_name">{{item.singername}}</span>
                    </div>
                </van-cell>
            </van-list>
        </main>
    </div>
</template>

<script>
import AppHeader from 'Components/AppHeader'
import { ref, onBeforeMount } from 'vue'
import { getSingerList } from 'Api/singer'
import { createImageUrl } from 'Utils/utils'
export default {
    name: 'SingerList',
    components: { AppHeader },
    props: ['classid'],
    setup (props, context) {
        const title = ref('')
        const list = ref([])

        onBeforeMount(async () => {
            const classid = props.classid
            const data = await getSingerList(classid)
            title.value = data.classname
            list.value = data.singers.list.info
        })

        return {
            title,
            list,
            createImageUrl
        }
    }
}
</script>

<style lang="scss" scoped>
.singer_item {
    display: flex;
    align-items: center;
    &--content {
        display: flex;
        align-items: center;
        .singer_image {
            width: 70px;
            height: 70px;
        }
        .singer_name {
            margin-left: 15px;
        }
    }
}
</style>
